<template>
  <div class="mine">
    <div class="mine_user">
	    <div class="i_head" >
	    	<img src="http://m.wangjiu.com/htmlResource/images/134-134.jpg" id="image_src">
	    </div>	    
	    <div class="i_been">
	      	<div class="i_user">
	      		<img src="http://m.wangjiu.com/htmlResource/images/member/c_l_01.png"/>见习骑士
	      	</div>
	        <p id="nickName">河北乐迷</p>
	        <span id="bal">余额：￥0</span>
	        <span id="integral">积分：0</span>
	      	<span id="growthValue">成长值：0</span>
	    </div>
		</div>
		<div class="mine_wrap">
	    <div class="mine_menu">
	        <a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m01.png">待支付</a>
	        <a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m02.png">待收货</a>
	        <a href="javascript:;" style="border: none;"><img src="http://m.wangjiu.com/htmlResource/images/m04.png">退款/退货</a>
	    </div>
	    <ul class="m_list">
	        <li>全部订单<a href="javascript:;">查看全部订单</a><div class="r_slip"></div></li>
	        <li>充返订单<a href="javascript:;">查看全部订单</a><div class="r_slip"></div></li>
	    </ul>
		</div>
		<div class="mine_wrap clear">
	    <ul class="b_list">
	        <li style="border: none;"><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m05.png">我的收藏<div class="r_slip"></div></a></li>
	        <li><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m06.png">VIP帐户<div class="r_slip"></div></a></li>
	        <li><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m07.png">礼品卡<div class="r_slip"></div></a></li>
	        <li><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m08.png">提货卡<div class="r_slip"></div></a></li>
	        <li><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m09.png">优惠券<div class="r_slip"></div></a></li>
	      	<li><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m20.png">会员俱乐部<div class="r_slip"></div></a></li>
	        <li><a href="javascript:;"><img src="http://m.wangjiu.com/htmlResource/images/m10.png">个人管理<div class="r_slip"></div></a></li>
	    </ul>
	    <p class="btn" @click="quit">退出登录</p>
	</div>

  </div>
</template>

<script>
export default {
  name: 'mine',
  data () {
    return {
      msg: 'mine'
    }
  },
  methods:{
  	quit:function(){
  		this.$router.push({path:"/Mine_in"})
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mine{
	background:#f8f8f8;
}
.mine_user{
	background: url(http://m.wangjiu.com/htmlResource/images/u_bk.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  text-align: center;
  padding-bottom: 10%;
}
#image_src{
	width: 20%;
	border: 1px solid #bdcccd;
	border-radius: 50%;
  margin: 10% auto 2% auto;
}
.i_been{
    color:#ff9c00 ;
}
.i_user{
	  width: 22%;
    padding: 0 3% 0 0;
    margin: 0 0 2% 39%;
    background: url(http://m.wangjiu.com/htmlResource/images/y_09.png) no-repeat;
    background-size: contain;
    color: #fff;
    text-align: right;
    position: relative;
}
.i_user>img{
	position: absolute;
  z-index: 1;
  top: -30%;
  left: -22%;
  width: 35%;
}
#nickName{
	color: #fff;
  font-size:0.4rem;
  padding-bottom: 1%;
}
.mine_wrap{
	background: #fff;
  margin-bottom: 4%;
  padding: 0 3%;
}
.mine_menu{
	overflow: hidden;
}
.mine_menu>a{
	display: block;
  box-sizing: border-box;
  float: left;
  width: 33.33%;
  text-align: center;
  text-decoration: none;
  color: #434343;
  border-right: 1px solid #dedede;
  margin: 3% 0;
  font-size: 0.4rem;
}
.mine_menu>a>img{
	display: block;
  margin: 0 auto;
  width: 30%;
}
.m_list>li{
	border-top: 1px solid #dedede;
  padding: 4% 0;
  position: relative;
}
.m_list>li>a{
	float: right;
	color:#434343;
	padding-right: 6%;
}
.b_list{
	padding-bottom: 2%;
}
.b_list>li{
	border-top: 1px solid #dedede;
  padding: 4% 0;
  position: relative;
}
.b_list>li>a>img{
	width: 10%;
	padding-right: 3%;
}
.r_slip {
  position: absolute;
  z-index: 1;
  right:0;
  top: 27%;
  background: url(http://m.wangjiu.com/htmlResource/images/l02.png) no-repeat;
  background-size: contain;
  width: 4%;
  padding: 5% 0;
}
.btn{
	background-color: #45abe5;
	margin-top: 0.5rem;
	width: 100%;
  height: 1.3rem;
  line-height: 1.05rem;
  text-align: center;
}
</style>
